<template>
  <div class="home">
    <div class="menu">
      <div class="logo"><div>LCRM</div></div>
      <div class="cutline"></div>
      <div class="menu-wrapper">
        <div class="slide-nav">
          <div v-for="nav in navArr" :key="nav.index" class="nav-item" :class="{'active': currentNavIndex === nav.index}" @click="changeNav(nav.index)">
            <p><icon-svg :name="nav.icon" class="svg-class"></icon-svg></p>
            <p>{{nav.name}}</p>
          </div>
        </div>
        <div class="menu-list">
          <div v-for="menu in menuArr[currentNavIndex]" :key="menu.id || menu.url">
            <div @click="openMenu(menu)" class="menu-item" :class="{'active': menu.id? currentMenu.id === menu.id: currentMenu.url === menu.url}">
              <icon-svg v-if="menu.icon" :name="'crm' + menu.icon" class="svg-class"></icon-svg> <span>{{menu.name}}</span>
            </div>
            <div v-if="menu.child && menu.child.length > 0 && menu.showChild">
              <div v-for="child in menu.child" :key="child.id" @click="openMenu(child)" class="menu-item" style="padding-left: 50px;" :class="{'active': child.id? currentMenu.id === child.id: currentMenu.url === child.url}">
                <icon-svg v-if="child.icon" :name="'crm' + child.icon" class="svg-class"></icon-svg> <span>{{child.name}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="main-header clearfix">
        <span>首页</span> <i class="el-icon-arrow-right"></i>
        <span> {{navArr[currentNavIndex].name}}</span> <i v-if="currentMenu.name" class="el-icon-arrow-right"></i>
        <span v-if="currentMenu.name">{{currentMenu.name}}</span>
        <span v-if="cpglMenus.length > 0">
          <span v-for="(item) in cpglMenus" :key="item.id">
            <i class="el-icon-arrow-right"></i>
            {{item.name}}
          </span>
        </span>
        <span style="margin-right:30px;cursor: pointer;float:right;font-size:17px;" @click="toHelp">{{isCrmManager?'管理员':''}}使用帮助<i class="el-icon-question"></i></span>
      </div>
      <div class="content">
        <router-view :key="routeCounter"/>
      </div>
    </div>
    <el-dialog width="1000px" :visible.sync="showEmailInit" :show-close="false" :close-on-press-escape="false" :close-on-click-modal="false">
      <div slot="title">
        <h2 style="text-align:center;margin-bottom:0;">请先填写邮箱信息</h2>
      </div>
      <div class="form-wrapper" style="padding: 0 20px;">
        <el-form ref="form" :model="emailForm" label-width="140px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="用户名：">
                <span slot="label">邮箱账号<span style="color: red;">*</span>：</span>
                <el-input v-model="emailForm.account"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="登录密码/授权码：">
                <span slot="label">登录密码/授权码<span style="color: red;">*</span>：</span>
                <el-input v-model="emailForm.password"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="邮箱昵称：">
                <span slot="label">邮箱昵称<span style="color: red;">*</span>：</span>
                <el-input v-model="emailForm.nickname"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button style="float:right;" size="small" @click="showEmailInit = false">关闭</el-button>
            <el-button style="float:right;margin-right: 10px;" size="small" type="primary" @click="initEmail">创建</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//icon-crm
import dingMixin from  '@/mixins/ding'
import * as dd from 'dingtalk-jsapi'
import formUtil from "@/utils/formUtil";

export default {
  data() {
    return {
      initEmailStatus: false,
      routeCounter: 0,
      currentNavIndex: 0,
      currentMenu: {},
      showEmailInit: false,
      emailForm: {
        account: '',
        password: '',
        nickname: ''
      },
      cpglMenus: [],
      navArr: [{
        index: 0,
        name: 'CRM',
        icon: 'crmcrm'
      },{
        index: 1,
        name: '报表',
        icon: 'crmbb'
      },{
        index: 2,
        name: '邮箱',
        icon: 'crmemail'
      },{
        index: 3,
        name: '产品',
        icon: 'crmproduct'
      }],
      menuArr: [[{
        name: '待办事项',
        icon: 'dbsx',
        url: 'dbsx'
      },{
        name: '联系跟进',
        icon: 'lxgj',
        url: 'lxgj'
      },{
        name: '全部客户',
        icon: 'qbkh',
        url: 'qbkh'
      },{
        name: '我的客户',
        icon: 'wdkh',
        url: 'wdkh'
      },{
        name: '共享客户',
        icon: 'gxkh',
        url: 'gxkh'
      },{
        name: '公海客户',
        icon: 'ghkh',
        url: 'ghkh'
      },{
        name: '订单管理',
        icon: 'ddgl',
        url: 'ddgl'
      },{
        name: '客户投诉',
        icon: 'khts',
        url: 'khts'
      },{
        name: '组员',
        icon: 'zy',
        url: 'zy'
      },{
        name: '公司列表',
        icon: 'gslb',
        url: 'gslb'
      }],[{
        name: '客户分级',
        icon: 'khfj',
        url: 'khfj'
      },{
        name: '团队统计',
        icon: 'tdtj',
        url: 'tdtj'
      },{
        name: '产品销售',
        icon: 'cpxs',
        url: 'cpxs'
      }],[],[{
        name: '产品管理',
        icon: 'cpgl',
        url: 'cpgl'
      }]]
    }
  },
  computed: {
    isCrmManager() {
      return this.userInfo.roleIdList && this.userInfo.roleIdList.includes('1289086160891670529')
    }
  },
  async mounted() {
    window.tableHeight = document.documentElement['clientHeight'] - 250;
    this.currentMenu = this.menuArr[0][0];
    this.getDingConfig().then(async config =>{
      this.dingConfig = config;
      this.dingLogin(config.corpId, () => {
        if(this.isCrmManager) {
          this.menuArr.push([{
            name: '权限设置',
            icon: 'qxsz',
            url: 'qxsz'
          },{
            name: '系统设置',
            icon: 'xtsz',
            url: 'xtsz'
          }]);
          this.navArr.push({
            index: 4,
            name: '设置',
            icon: 'crmset'
          })
        }
        if(this.$route.query.orderNo) {
          this.currentMenu = {
            name: '订单管理',
            icon: 'ddgl',
            url: 'ddgl'
          };
          this.$router.push({ name: 'lcrm-ddgl', params: {orderNo: this.$route.query.orderNo}})
        }else {
          this.$router.push({ name: 'lcrm-dbsx'})
        }
      });
      this.run_dd_config();
    })
  },
  mixins: [dingMixin],
  methods: {
    openInitEmailDialog() {
      this.showEmailInit = true;
    },
    async initEmail() {
      if(!this.emailForm.account) return this.$message.error('请输入邮箱账号');
      if(!this.emailForm.password) return this.$message.error('请输入邮箱密码');
      if(!this.emailForm.nickname) return this.$message.error('请输入昵称');

      if(!await this.$httpN.postB('crm/mail/account/save', this.emailForm)) return;
      formUtil.submitSuccess('成功');
      this.showEmailInit = false;
      location.reload();
    },
    toHelp() {
      this.$router.push({ name:  'help', params: {articleId: '1304327345004437506'}})
    },
    async changeNav(type) {
      this.currentNavIndex = type;
      this.currentMenu = {};
      if(type === 0) {
        this.currentMenu = {
          name: '待办事项',
          icon: 'dbsx',
          url: 'dbsx'
        };
        this.$router.push({ name: 'lcrm-dbsx'})
      }else if(type === 2) {
        this.initEmailMenu();
      }else if(type === 3) {
        this.currentMenu = {
          name: '产品管理',
          icon: 'cpgl',
          url: 'cpgl'
        };
        this.$router.push({ name: 'lcrm-cpgl'})
      }else if(type === 1) {
        this.currentMenu = {
          name: '客户分级',
          icon: 'tb',
          url: 'khfj'
        };
        this.$router.push({ name: 'lcrm-khfj'})
      }else if(type === 4) {
        this.currentMenu = {
          name: '权限设置',
          icon: 'qxsz',
          url: 'qxsz'
        };
        this.$router.push({ name: 'lcrm-qxsz'})
      }
    },
    async initEmailMenu() {
      if(!this.initEmailStatus) {
        let emailMenu = await this.$httpN.get('crm/mail/folder/tree');
        if(emailMenu === '请先创建邮箱账号') return this.openInitEmailDialog();
        if(typeof emailMenu === 'string') {
          this.$message.error(emailMenu);
        }else {
          let collect = {
            icon: 'folder',
            url: '',
            name: '自建邮件夹',
            id: 'zjyjj',
            child: [],
            showChild: false
          };
          emailMenu.forEach((item) => {
            if(item.sysFolderName === '草稿箱') {
              item.icon = 'cgx'
            }else if(item.sysFolderName === '已发送') {
              item.icon = 'yfs'
            }else if(item.sysFolderName === '收件箱') {
              item.icon = 'sjx'
            }else if(item.sysFolderName === '垃圾邮件') {
              item.icon = 'ljyj'
            }else if(item.sysFolderName === '回收站') {
              item.icon = 'hsz'
            }else if(item.sysFolderName === '待处理') {
              item.icon = 'dcl'
            }else {
              item.icon = 'folder'
            }
            item.url = 'list';
            item.name = item.sysFolderName;

            if(item.sysFolderName === '草稿箱') {
              this.menuArr[2].push(item);
            }else if(item.sysFolderName === '已发送') {
              this.menuArr[2].push(item);
            }else if(item.sysFolderName === '收件箱') {
              this.menuArr[2].push(item);
            }else if(item.sysFolderName === '垃圾邮件') {
              this.menuArr[2].push(item);
            }else if(item.sysFolderName === '回收站') {
              this.menuArr[2].push(item);
            }else if(item.sysFolderName === '待处理') {
              this.menuArr[2].push(item);
            }else {
              collect.child.push(item)
            }
          })
          this.menuArr[2].push({
            name: '联系人管理',
            icon: 'lxr',
            url: 'lxr'
          },{
            name: '账号管理',
            icon: 'zh',
            url: 'zh'
          },{
            icon: 'ds',
            url: 'list',
            name: '定时任务',
            id: 'ds'
          })
          this.menuArr[2].push(collect);
        }

        let emailData = await this.$httpN.postB('crm/mail/account/list',{
          page: this.page,
          limit: this.pageSize,
        })

        if(emailData.length > 0) {
          let chosen = emailData.filter((item) => item.chosen);
          this.menuArr[2].unshift({
            name: chosen[0].account,
            url: 'empty',
            icon: ''
          });
        }

        this.initEmailStatus = true;
      }

      let arr = this.menuArr[2].filter((item) => item.sysFolderName === '待处理');
      if(arr.length > 0) {
        this.currentMenu = arr[0];
        window.FOLDERID = arr[0].id;
        window.EMAILTYPE = arr[0].icon;
        this.$router.push({ name: 'lcrm-' + arr[0].url})
      }else {
        this.currentMenu = this.menuArr[2][0];
        window.FOLDERID = this.menuArr[2][0].id;
        window.EMAILTYPE = this.menuArr[2][0].icon;
        this.$router.push({ name: 'lcrm-' + this.menuArr[2][0].url})
      }
    },
    async refreshEmail() {
      this.menuArr[2][this.menuArr[2].length -1].child = [];
      let emailMenu = await this.$httpN.get('crm/mail/folder/tree');
     
      emailMenu.forEach((item) => {
        if(item.sysFolderName === '草稿箱') {
        }else if(item.sysFolderName === '已发送') {
        }else if(item.sysFolderName === '收件箱') {
        }else if(item.sysFolderName === '垃圾邮件') {
        }else if(item.sysFolderName === '回收站') {
        }else if(item.sysFolderName === '待处理') {
        }else {
          item.icon = 'folder'
        }
        item.url = 'list';
        item.name = item.sysFolderName;

        if(item.sysFolderName === '草稿箱') {
        }else if(item.sysFolderName === '已发送') {
        }else if(item.sysFolderName === '收件箱') {
        }else if(item.sysFolderName === '垃圾邮件') {
        }else if(item.sysFolderName === '回收站') {
        }else if(item.sysFolderName === '待处理') {
        }else {
          this.menuArr[2][this.menuArr[2].length -1].child.push(item)
        }
      })
    },
    openMenu(menu) {
      if(menu.id === 'zjyjj') {
        menu.showChild = !menu.showChild;
        return
      }
      if(menu.url === 'empty') return;
      this.routeCounter ++;
      this.currentMenu = menu;
      if(menu.id){
        window.FOLDERID = menu.id;
        window.EMAILTYPE = menu.icon;
      }
      this.$router.push({ name: 'lcrm-' + menu.url})
    }
  }
}
</script>

<style lang="scss" scoped>
  .home{
    height: 100vh;
    width: 100%;
    background: #FFF;
    display: flex;
    .menu{
      width: 296px;
      height: 100%;
      background: #272E38;
      .logo{
        height: 50px;
        background: #37424f;
        padding: 5px;
        div{
          font-size: 16px;
          line-height: 40px;
          text-align: center;
          color: #FFF;
          font-weight: bold;
          background: #2B333E;
        }
      }
      .cutline{
        border-top: solid 1px #111415;
        border-bottom: solid 1px #36393D;
      }
      .menu-wrapper{
        display: flex;
        height: calc(100vh - 52px);
        .slide-nav{
          width: 88px;
          background: #272E38;
          height: 100%;
          .nav-item{
            position: relative;
            color: #637381;
            text-align: center;
            padding: 10px 0;
            margin-top: 10px;
            p{
              margin: 0;
              .svg-class{
                width: 18px;
                height: 18px;
                margin-bottom: 5px;
              }
            }
            &.active{
              background: #323a45;
              color: white;
            }
            &.active::after{
              left: 0px;
              border: solid transparent;
              content: " ";
              height: 50px;
              width: 10px;
              position: absolute;
              border-left-color: #1E9FFF;
              top: 5px;
            }
            &:hover{
              background: #1E9FFF;
              color: #ffffff;
              cursor: pointer;
            }
          }
        }
        .menu-list{
          overflow:auto;
          height: 100%;
          width: 208px;
          background: #323a45;
          .menu-item{
            position: relative;
            color: #ddd;
            font-size: 14px;
            padding: 13px 0 13px 30px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
            span{
              vertical-align: bottom;
            }
            i{
              margin-right: 12px;
              font-size: 18px;
              vertical-align: bottom;
            }
            .svg-class{
              margin-right: 12px;
              width: 16px;
              height: 16px;
              vertical-align: bottom;
            }
            &:hover{
              background: #37424f;
            }
            &.active{
              border-left: 3px solid #1E9FFF;
              color: #ffffff;
              background-color: #37424f;
            }
            &.active::after{
              right: 0px;
              border: solid transparent;
              content: " ";
              height: 0px;
              width: 0px;
              position: absolute;
              border-right-color: #ffffff;
              border-width:8px;
              top: 14px;
            }
          }
        }
      }
    }
    .main{
      width: calc(100% - 296px);
      height: 100%;
      .main-header{
        height: 51px;
        line-height: 51px;
        background: #f4f6f9;
        border-bottom: 1px solid #ddd;
        color: black;
        font-weight: bold;
        padding-left: 20px;
      }
    }
  }
</style>
